<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<customNavBar1 :title="title"></customNavBar1>

		<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000" :duration="1000"
			style="height: 450rpx;">
			<swiper-item class="swiper-items" v-for="item, index in list1" :key="index">
				<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="aspectFit"></image>
			</swiper-item>
		</swiper>

		<u-tabs :list="togList" @click="click" itemStyle="width:50%;padding:22rpx 0;background:#fff" lineWidth="64"
			lineHeight="4" :current="current"></u-tabs>

		<view class="toggleCard">
			<!-- 求职信息 -->
			<template v-if="names == '求职信息'">
				<view class="card2" v-for="item, index in userList" :key="index" @click.stop="navInformation(item, 0)">
					<view class="one-title">
						<view class="left">
							{{ item.positionName }}
						</view>
						<view class="right">
							{{ item.money }}
						</view>
					</view>
					<view class="two-address">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{ item.address }}</view>
					</view>
					<view class="four-key">
						<view class="key" v-for="(ite, index) in item.listType" :key="index">
							{{ ite }}
						</view>
					</view>
					<view class="five-user">
						<view class="five-user-left">
							<view class="left">
								<image class="header_img" :src="item.headUrl" mode=""></image>
							</view>
							<view class="center">
								<view class="one">
									{{ item.realNameCopy }}
								</view>
								<view class="two">
									{{ item.createDate }}
								</view>
							</view>
						</view>
						<view class="right" @click.stop="navInformation(item, 0)">
							查看简历
						</view>
					</view>

				</view>
			</template>
			<!-- 招聘信息 -->
			<template v-if="names == '招聘信息'">
				<view class="card2" v-for="item, index in userList" :key="index" @click.stop="navInformation(item, 1)">
					<view class="one-title">
						<view class="left">
							{{ item.positionName }}
						</view>
						<view class="right">
							{{ item.money }}
						</view>
					</view>
					<view class="two-address">
						<image class="image"
							src="https://i.ringzle.com/file/20231212/24f0d7115fc546c49f0291c11094c54c.png" mode="">
						</image>
						<view>{{ item.address }}</view>
					</view>
					<view class="four-key">
						<view class="key" v-for="(ite, index) in item.listType" :key="index">
							{{ ite }}
						</view>
					</view>
					<view class="five-user">
						<view class="five-user-left">
							<view class="left">
								<image class="header_img" :src="item.headUrl" mode=""></image>
							</view>
							<view class="center">
								<view class="one">
									{{ item.realNameCopy }}
								</view>
								<view class="two">
									{{ item.createDate }}
								</view>
							</view>
						</view>
						<view class="right" @click.stop="navInformation(item, 1)">
							去申请
						</view>
					</view>
				</view>
			</template>
			<!-- <uni-load-more :status="status" color="#007aff" /> -->
			<nodata v-if="userList.length === 0"></nodata>
		</view>

		<view class="btn" v-if="names == '求职信息'" @click="Job">
			<view>
				<text style="margin: 0 8rpx;"> + </text> <text>发布</text>
			</view>
		</view>
		<view class="btn" v-if="names == '招聘信息'" @click="recruit">
			<view>
				<text style="margin: 0 8rpx;"> + </text> <text>发布</text>
			</view>
		</view>

	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index1.vue'
	import customNavBar1 from '@/compoments/uNavBar1'
	// Vue.component('c-nav-bar1', customNavBar1);
	export default {
		components: {
			customNavBar1,
			nodata
		},
		data() {
			return {
				title: '小工市场',
				togList: [{
						name: '招聘信息',
					},
					{
						name: '求职信息',
					},
				],
				list1: [{
					path: 'https://fsy.shengsi.gov.cn/file/20240730/f61e2672bd7c441baed79d8051448057.png',
					route:''
				}],
				userList: [],
				show: false,
				value: '',
				status: 0,
				fromData: {
					limit: 10,
					page: 1,
					type: null
				},
				share: null,
				popup: false,
				names: '',
				status: 'more', //加载状态
				substrings1: [],
				substrings2: [],
				substrings3: [],
				current: 0
			}
		},
		//上拉加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading'
				uni.showNavigationBarLoading()
				this.fromData.page++;
				this.getData(this.names)
			}
		},
		onLoad(option) {
			// this.names = option.name

		},
		onShow() {
			this.names = '招聘信息'
			// this.title = option.name
			this.getpage()
			this.getList(this.names)
			this.getDict()
		},
		filters: {
			// 去除富文本标签样式
			removeHtmlStyle(html) {
				const relStyle = /style\s*?=\s*?(['"])[\s\S]*?\1/g
				const relTag = /<.+?>/g
				const relClass = /class\s*?=\s*?(['"])[\s\S]*?\1/g
				let newHtml = ''
				if (html) {
					newHtml = html.replace(relStyle, '')
					newHtml = newHtml.replace(relTag, '')
					newHtml = newHtml.replace(relClass, '')
				}
				return newHtml
			}
		},
		methods: {
			// 求职发布
			Job() {
				uni.navigateTo({
					url: '/pagesService/market/Job'
				})
			},
			// 招聘发布
			recruit() {
				uni.navigateTo({
					url: '/pagesService/market/recruit'
				})
			},
			// tab切换
			click(e) {
				this.current = e.index
				this.getList(e.name)
			},
			// 获取轮播图数据
			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					let dataList = res.data.data.find((p) => p.dictType == 'banner_type').dataList;
					dataList.forEach(item => {
						if (item.dictLabel == this.title) {
							this.getSwiper(item.dictValue)
						}
					})
				})
			},
			// 获取轮播图数据
			getSwiper(type) {
				this.$api.get(`/sys/isappletpic/queryBannerByType/${type}`).then(res => {
					if (res.data.code === 0) {
						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}
						});
						if (list.length > 0) this.list1 = list;
					}
				})
			},
			getpage() {
				this.$api.get('/api/commrecruit/page', this.fromData).then(res => {
					this.userList = res.data.data.list
					this.userList.forEach(d => {
						d.realNameCopy = this.$aesTm.tuomin(d.realName, 1);
					})
				})
			},

			// 获取数据
			getList(name) {
				this.fromData.page = 1

				if (name == "招聘信息") {
					// this.title = '招聘信息'
					this.names = '招聘信息'
					this.fromData.type = null
					this.$api.get('/api/commrecruit/page', this.fromData).then(res => {
						this.userList = res.data.data.list
						this.userList.forEach(d => {
							d.realNameCopy = this.$aesTm.tuomin(d.realName, 1);
						})
					})
				}
				if (name == "求职信息") {
					// this.title = '求职信息'
					this.names = '求职信息'
					// /api/commjobhunt/page
					this.fromData.type = null
					this.$api.get('/api/commjobhunt/page', this.fromData).then(res => {
						this.userList = res.data.data.list
						this.userList.forEach(d => {
							d.realNameCopy = this.$aesTm.tuomin(d.realName, 1);
						})
					})
				}
			},

			// 下拉获取数据
			getData(name) {
				let that = this

				if (name == "招聘信息") {
					// this.title = '招聘信息'
					this.names = '招聘信息'
					this.fromData.type = null
					this.$api.get('/api/commrecruit/page', this.fromData).then(res => {
						if (res.data.code === 0) {

							let {
								list,
								total
							} = res.data.data;
							if (that.userList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.userList = [...that.userList, ...list];
							this.userList.forEach(d => {
								d.realNameCopy = this.$aesTm.tuomin(d.realName, 1);
							})
						} else that.$showToast(res.data.msg);

					})
				}
				if (name == "求职信息") {
					// this.title = '求职信息'
					this.names = '求职信息'
					// /api/commjobhunt/page
					this.fromData.type = null
					this.$api.get('/api/commjobhunt/page', this.fromData).then(res => {
						if (res.data.code === 0) {
							that.fromData.page++;
							let {
								list,
								total
							} = res.data.data;
							if (that.userList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.userList = [...that.userList, ...list];
							this.userList.forEach(d => {
								d.realNameCopy = this.$aesTm.tuomin(d.realName, 1);
							})
						} else that.$showToast(res.data.msg);
					})
				}
			},


			// 招聘 求职 详情
			navInformation(item, type) {
				let obj = {
					id: item.id,
					type: type, //0 求职 电话联系   1 招聘 申请职位
					bossName: item.linkName,
					bossPhone: item.phone
				}
				if (type == 0) {
					uni.navigateTo({
						url: '/pagesService/CouncilSquare/JobDetails?obj=' + JSON.stringify(obj)
					})
				}
				if (type == 1) {
					uni.navigateTo({
						url: '/pagesService/CouncilSquare/recruitDetails?obj=' + JSON.stringify(obj)
					})
				}
			},

			// 评论 // 去详情页面
			review(item) {
				let obj = {
					id: item.id,
					key: 0
				}
				uni.navigateTo({
					url: '/pagesService/serveDetails/serveDetails?obj=' + JSON.stringify(obj)
				})
			},

			// 点赞
			giveALike(item) {
				let list = {
					id: item.id,
					type: item.type
				}
				this.$api.get('/api/behavior/Like', list)
					.then(res => {
						// this.getList(this.id)
						this.$showToast(res.data.data)
						if (res.data.data == '点赞成功') {
							this.likenumShow = false

						} else if (res.data.data == '取消成功') {
							this.likenumShow = true
						}
					})
			},
			// 打开弹出框
			open() {},
			// 关闭弹框事件
			close() {
				this.show = false //评论弹框
				this.popup = false //分享弹框
			},
			// input事件
			change() {},
		}
	}
</script>
<style lang="less">
	.u-tabs__wrapper__nav__line {
		left: 30rpx !important;
		height: 6rpx !important;
		width: 80rpx !important;
	}

	.u-input__content__field-wrapper {
		margin-left: 75rpx !important;
	}

	.content {
		height: 30vh;
		width: 100%;
		// display: flex;
		padding: 30rpx;

		.title {
			font-size: 28rpx;
			color: #333333;
		}

		.share {
			display: flex;
			align-items: center;
			text-align: center;
			padding: 20rpx;

			.weixin {
				margin-right: 20rpx;

			}

			.clear-style {
				border: none;
				border-radius: 0;
				background-color: transparent !important;
				text-align: left;
				font-size: 24rpx;
				color: #71747C;
			}

			.clear-style::after {
				border: none;
			}



		}
	}
</style>

<style lang="scss" scoped>
	.toggleCard {
		background-color: #fff;
		padding: 24rpx;
		height: 1000rpx;

		.header_img {
			border-radius: 50%;
		}

		.toggle {
			height: 100rpx;
			// width: 2000rpx;
			background: #FFFFFF;

			.toggle-list {
				// background-color: aqua;
				margin: 0 12rpx;
				display: inline-block;
				/* 让内容水平排列，不换行 */
				/* 添加内容的样式，如内边距、外边距、宽度等 */

				.text {
					width: 136rpx;
					height: 48rpx;
					color: #363636;
					font-size: 30rpx
				}
			}

		}

		.card {
			box-sizing: border-box;
			padding: 24rpx;
			margin: 24rpx auto 24rpx;
			// margin: 0 24rpx 24rpx;
			background: #FFFFFF;
			width: 676rpx;
			border-radius: 16rpx;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);


			.card-top {
				padding: 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.top-left {
					display: flex;

					image {
						border-radius: 50rpx;
						width: 60rpx;
						height: 60rpx;
						margin: 0 16rpx 0 -22rpx;
					}

					.top-name {
						text-align: left;

						h3 {
							font-size: 28rpx;
							color: #333333;
						}

						span {
							font-size: 22rpx;
							color: #AAAAAA;
						}
					}

				}

				.top-time {
					// background: agba(0, 0, 0, 0.8) #1E6BFF;
					color: #00BEFF;
					font-size: 24rpx;
					background: #ebfaff;
					padding: 4rpx 16rpx;
					border-radius: 50rpx;
					display: flex;
					align-items: center;
				}
			}

			.card-center {
				width: 625rpx;
				overflow: hidden;

				.center-title {
					color: #333333;
					// color: #363636;
					font-size: 26rpx;
					overflow-wrap: break-word;
					// color: rgba(51, 51, 51, 1);
					font-family: PingFang-SC-Bold;
					font-weight: bold;
					text-align: left;
					white-space: nowrap;
					display: -webkit-box;
					font-weight: Regular;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;

				}

				.center-text {
					font-weight: Regular;
					margin-top: 6rpx;
					color: #666666;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;


				}
			}

			.card-img {
				display: flex;
				justify-content: space-between;

				.image {

					.img {
						width: 214rpx;
						height: 214rpx;
						background: #00BEFF;

						.img:nth-child(1) {
							border-radius: 16rpx 0rpx 0rpx 16rpx;
						}

						.img:nth-child(2) {
							border-radius: 0rpx 0rpx 0rpx 0rpx;
						}

						.img:nth-child(3) {
							border-radius: 0rpx 16rpx 16rpx 0rpx;
						}
					}
				}


			}



			.card-bottom {
				display: flex;
				justify-content: space-between;
				text-align: center;
				margin: 32rpx 0;
				// width: 702rpx;


				.card-img-one {
					// margin: 0 44rpx;
					display: flex;
					margin: 0 auto;



					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-two {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}

				.card-img-three {
					margin: 0 auto;
					display: flex;

					image {
						width: 36rpx;
						height: 36rpx;
						margin: 0 8rpx;
					}

					text {
						font-size: 24rpx;
					}
				}


			}



		}

		.card2 {
			padding: 24rpx 0 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.one-title {
				display: flex;
				justify-content: space-between;

				.left {
					font-size: 32rpx;
					color: #333333;
					font-weight: Bold;
				}

				.right {
					font-size: 32rpx;
					color: #FF4141;
					font-weight: Bold;
				}
			}

			.two-address {
				display: flex;
				align-items: center;
				font: size 24rpx;
				color: #1C1E41;
				margin: 24rpx 0 20rpx;
				font-weight: Regular;

				.image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			}

			.four-key {
				margin: 20rpx 0 36rpx;

				display: flex;

				.key {
					display: flex;
					margin-right: 12rpx;
					font-size: 22rpx;
					padding: 6rpx 12rpx;
					color: #874D29;
					border: 1rpx solid #EBC9B8;
				}
			}

			.five-user {
				display: flex;
				justify-content: space-between;

				.five-user-left {
					display: flex;

				}

				.left {
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.center {
					margin: 0 20rpx;

					.one {
						font-size: 28rpx;
						color: #333333;
						font-weight: Bold;
					}

					.two {
						font-size: 26rpx;
						color: #808080;
						font-weight: Regular;
					}
				}

				.right {
					border-radius: 50rpx;
					border: 1rpx solid #007A69;
					color: #007A69;
					text-align: center;
					line-height: 64rpx;
					width: 148rpx;
					height: 64rpx;
					font-weight: Regular;
				}

			}

		}

		.card3 {
			display: flex;
			padding: 24rpx 0 24rpx;
			background-color: #FFFFFF;
			border-bottom: 1rpx solid #EFEFEF;

			.left {
				margin-right: 20rpx;

				.image {
					width: 288rpx;
					height: 204rpx;
				}

			}

			.right {
				padding: 10rpx 0;

				.one-title {
					font-size: 32rpx;
					color: #1C1E41;
					font-weight: Bold;
				}

				.two-address {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #1C1E41;
					margin: 16rpx 0;
					font-weight: Regular;

				}


			}
		}

	}

	.btn {
		position: fixed;
		bottom: 10%;
		left: 40%;
		width: 180rpx;
		height: 88rpx;
		border-radius: 50rpx;
		background-color: #007A69;
		font-weight: Bold;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		text-align: center;

		:nth-child(1) {
			margin: 0 auto;
		}
	}
</style>